import React, { useEffect } from "react";

// 导入样式
import "./index.scss";

export default function Map() {
  useEffect(() => {
    //初始化地图实例
    //注意:在react脚手架中全局对象需要使用Windows来访问,否则会造成eslint语法报错
    var map = new window.BMapGL.Map("container");
    //设置中心点坐标
    var point = new window.BMapGL.Point(116.404, 39.915);
    //地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 15);

    //通过浏览器进行定位
    // var geolocation = new window.BMapGL.Geolocation();
    // geolocation.getCurrentPosition(function (r) {
    //   var mk = new window.BMapGL.Marker(r.point);
    //   map.addOverlay(mk);
    //   map.panTo(r.point);
    //   console.log("您的位置  浏览器：" + r.point.lng + "," + r.point.lat);
    // });

    //通过IP定位
    // function myFun(result) {
    //   var cityName = result.name;
    //   map.setCenter(cityName);
    //   console.log("IP当前定位城市:" + cityName);
    // }
    // var myCity = new window.BMapGL.LocalCity();
    // myCity.get(myFun);

    // 定位SDK辅助定位
    // var gc = new window.BMapGL.Geocoder(); //创建地理编码器
    // geolocation.getCurrentPosition(function (r) {
    //   var mk = new window.BMapGL.Marker(r.point);
    //   map.addOverlay(mk);
    //   map.panTo(r.point); //移动地图中心点
    //   console.log("您的位置  SDK辅助定位：" + r.point.lng + "," + r.point.lat);
    //   var pt = r.point;
    //   //alert(r.point.lng);//X轴
    //   //alert(r.point.lat);//Y轴

    //   gc.getLocation(pt, function (rs) {
    //     var addComp = rs.addressComponents;
    //     //alert(addComp.city);
    //     console.log(
    //       addComp.province +
    //         addComp.city +
    //         addComp.district +
    //         addComp.street +
    //         addComp.streetNumber
    //     );
    //   });
    // });
  }, []);
  return (
    <div className="map">
      {/* 地图容器 */}
      <div id="container"></div>
    </div>
  );
}
